<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #369;
				position: relative;
				animation: mymove 4s infinite;
			}
			div:hover{
				animation-play-state: paused;
			}
			@keyframes mymove{
				0%{
					top: 0px;
				}
				20%{
					top: 50px;
					background: #996633;
				}
				40%{
					top: 80px;
					background: #008800;
				}
				60%{
					top: 120px;
					background: #999;
				}
				80%{
					top: 200px;
					background: #666;
				}
				100%{
					top: 200px;
					background: #333;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
